<script setup lang="ts">
  import { useGetOrderTotalFee } from './service'
  import { computed, ref } from 'vue'
  import { CaretBottom, CaretRight } from '@element-plus/icons-vue'

  // 展开的面板
  const activeNames = ref(['order_total_fee'])

  // 使用工单总费用服务
  const { orderTotalFee, getOrderTotalFeeLoading, getOrderTotalFeeFn } = useGetOrderTotalFee()

  /**
   * 计算所有费用的合计
   */
  const calcFeeSummary = computed(() => {
    const result = {
      platform: 0,
      customer: 0,
      network: 0,
    }

    if (orderTotalFee.value) {
      result.platform =
        (orderTotalFee.value.platformFeeSettlement.orderSettlementPrice || 0) +
        (orderTotalFee.value.platformFeeSettlement.serviceFee || 0) +
        (orderTotalFee.value.platformFeeSettlement.spareFee || 0)
      result.customer =
        (orderTotalFee.value.customerFeeSettlement.orderSettlementPrice || 0) +
        (orderTotalFee.value.customerFeeSettlement.serviceFee || 0) +
        (orderTotalFee.value.customerFeeSettlement.spareFee || 0)
      result.network =
        (orderTotalFee.value.networkFeeSettlement.orderSettlementPrice || 0) +
        (orderTotalFee.value.networkFeeSettlement.serviceFee || 0) +
        (orderTotalFee.value.networkFeeSettlement.spareFee || 0)
    }

    return result
  })

  defineExpose({
    getOrderTotalFeeFn,
    orderTotalFee,
  })
</script>

<template>
  <div class="order_total_fee">
    <el-collapse v-model="activeNames">
      <el-collapse-item v-loading="getOrderTotalFeeLoading" name="order_total_fee">
        <template #title>
          <div style="box-sizing: border-box; display: flex; gap: 5px; align-items: center">
            <el-icon>
              <template v-if="activeNames.includes('order_total_fee')">
                <CaretBottom />
              </template>
              <template v-else>
                <CaretRight />
              </template>
            </el-icon>
            <span>工单总费用</span>
          </div>
        </template>
        <div class="order-total-fee">
          <table>
            <thead>
              <tr>
                <th>公司承担总费用</th>
                <th>收取客户总费用</th>
                <th>支付部门总费用</th>
              </tr>
            </thead>
            <tbody v-if="orderTotalFee">
              <tr>
                <td>
                  <div class="flex_column">
                    <div class="flex">
                      <div class="title">工单结算价：</div>
                      <div>￥{{ orderTotalFee.platformFeeSettlement.orderSettlementPrice }}</div>
                    </div>
                    <div class="flex">
                      <div class="title">服务费：</div>
                      <div>￥{{ orderTotalFee.platformFeeSettlement.serviceFee }}</div>
                    </div>
                    <div class="flex">
                      <div class="title">配件费：</div>
                      <div>￥{{ orderTotalFee.platformFeeSettlement.spareFee }}</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="flex_column">
                    <div class="flex">
                      <div class="title">工单结算价：</div>
                      <div>￥{{ orderTotalFee.customerFeeSettlement.orderSettlementPrice }}</div>
                    </div>
                    <div class="flex">
                      <div class="title">服务费：</div>
                      <div>￥{{ orderTotalFee.customerFeeSettlement.serviceFee }}</div>
                    </div>
                    <div class="flex">
                      <div class="title">配件费：</div>
                      <div>￥{{ orderTotalFee.customerFeeSettlement.spareFee }}</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="flex_column">
                    <div class="flex">
                      <div class="title">工单结算价：</div>
                      <div>￥{{ orderTotalFee.networkFeeSettlement.orderSettlementPrice }}</div>
                    </div>
                    <div class="flex">
                      <div class="title">服务费：</div>
                      <div>￥{{ orderTotalFee.networkFeeSettlement.serviceFee }}</div>
                    </div>
                    <div class="flex">
                      <div class="title">配件费：</div>
                      <div>￥{{ orderTotalFee.networkFeeSettlement.spareFee }}</div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="total_row">
                  <div class="flex_column">
                    <div class="flex">
                      <div class="title">合计：</div>
                      <div style="color: #f56c6c">￥{{ calcFeeSummary.platform }}</div>
                    </div>
                  </div>
                </td>
                <td class="total_row">
                  <div class="flex_column">
                    <div class="flex">
                      <div class="title">合计：</div>
                      <div style="color: #f56c6c">￥{{ calcFeeSummary.customer }}</div>
                    </div>
                  </div>
                </td>
                <td class="total_row">
                  <div class="flex_column">
                    <div class="flex">
                      <div class="title">合计：</div>
                      <div style="color: #f56c6c">￥{{ calcFeeSummary.network }}</div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped lang="scss">
  .order_total_fee {
    width: 100%;
    min-height: 240px;
    max-height: 240px;
    padding: 0 12px;
    background-color: #fff;
    box-sizing: border-box;

    :deep(.el-collapse) {
      border-top: none !important;
      border-bottom: none !important;
    }

    :deep(.el-collapse-item__wrap) {
      border-bottom: none !important;
    }

    table {
      width: 100%;
      height: 100%;
      border-collapse: collapse;

      tr {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        th {
          height: 38px;
          background-color: rgb(245, 247, 250, 1);
          display: flex;
          justify-content: center;
          align-items: center;
        }

        td {
          padding: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .total_row {
          border-top: none;
        }
      }
    }

    td,
    th {
      border-top: 1px solid rgba(#ebeef5, 1);
      border-left: 1px solid rgba(#ebeef5, 1);
    }

    td:last-child,
    .th:last-child {
      border-right: 1px solid rgba(#ebeef5, 1);
    }

    td {
      border-bottom: 1px solid rgba(#ebeef5, 1);
    }

    .flex_column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .flex {
        display: flex;

        .title {
          width: 72px;
          text-align: right;
          white-space: nowrap;
        }
      }
    }
  }
</style>
